<template>
  <div class="app-containers">
    <el-row>
      <el-col :span="6">
        <div class="grid-content one">
          <!-- 单位的选择 -->
          <el-container style="padding: 0;height: 100%;">
            <el-header class="smallHeader" style="height: 40px; line-height: 40px">单位
            </el-header>
            <el-main class="smallmain">
              <el-tree v-loading="loading" :data="deptOptions" :props="defaultProps" accordion
                :default-expanded-keys="['0']" :expand-on-click-node="false" highlight-current ref="tree" node-key="id"
                :filter-node-method="filterNode" @node-click="handleNodeClick" :default-expand-all="false">
              </el-tree>
            </el-main>
          </el-container>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content two">
          <!-- 人员的选择  -->
          <el-row>
            <el-col>
              <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="40px" style="height: 40px"
                label-position="left">
                <el-form-item label="姓名" prop="userName">
                  <el-input v-model.trim="queryParams.userName" placeholder="请输入姓名" clearable style="width: 200px"
                    @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleQuery">搜索</el-button>
                  <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <!-- 多选时 -->
            <div v-show="isshow != 1" style="width: 100%">
              <el-table v-loading="loading1" ref="checked" :data="userList" tooltip-effect="dark" row-key="uuid"
                style="width: 100%; height: 485px" @select="selectionRow" @select-all="selectionRowAll">
                <el-table-column type="selection" width="55" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="orgName" label="部门" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="realName" label="人员" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="mobile" label="手机号" show-overflow-tooltip>
                </el-table-column>
                <!-- <el-table-column
                    prop="ssex"
                    label="性别"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.row.ssex == 0">男</span>
                      <span v-else-if="scope.row.ssex == 1">女</span>
                      <span v-else>未知</span>
                    </template>
                  </el-table-column> -->
              </el-table>
            </div>
          </el-row>
          <el-row>
            <!-- 单选时 -->
            <div class="wrapBox" v-show="isshow == 1" style="width: 100%;height: 485px;">
              <el-table v-loading="loading1" ref="radio" :data="userList" tooltip-effect="dark" row-key="uuid"
                style="width: 100%;height: 485px;" :highlight-current-row="true" @current-change="handleCurrentChange">
                <el-table-column prop="orgName" align="center" label="部门" show-overflow-tooltip />
                <el-table-column prop="realName" align="center" label="人员" show-overflow-tooltip />
                <el-table-column prop="mobile" align="center" label="手机号" show-overflow-tooltip />
                <!-- <el-table-column
                    prop="ssex"
                    label="性别"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.row.ssex == 0">男</span>
                      <span v-else-if="scope.row.ssex == 1">女</span>
                      <span v-else>未知</span>
                    </template>
                  </el-table-column> -->
              </el-table>
            </div>
          </el-row>
          <el-row>
            <pagination style="margin-top: 15px;" v-show="total > 0" :total="total"
              v-model:page="queryParams.currentPage" v-model:limit="queryParams.pageSize" @pagination="getList" />
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content three">
          <!-- 已选人员 -->
          <el-container style="padding: 0;height: 100%;">
            <el-header class="smallHeader" style="height: 40px;"><span>已选人员</span>
              <el-button size="small" plain @click="toggleSelection()">删除全部</el-button>
            </el-header>
            <el-main class="smallmain tableBox">
              <p v-if="selectList.length == 0" class="nodata">暂无数据</p>
              <div class="tagBox" v-else>
                <el-tag class="tag" :key="tag.uuid" v-for="tag in selectList" closable :disable-transitions="false"
                  @close="handleClose(tag)">
                  <span class="tagItem">{{ tag.orgName }}</span>
                  <span class="tagItem">{{ tag.realName }}</span>
                  <span class="tagItem">{{ tag.mobile }}</span>
                  <!-- <span v-if="tag.ssex == 0" class="tagItem">男</span>
                  <span v-else-if="tag.ssex == 1" class="tagItem">女</span>
                  <span v-else class="tagItem">未知</span> -->
                </el-tag>
              </div>
            </el-main>
          </el-container>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { queryUserList, treeSelectDepts } from "@/api/taskmanage/group.js";
const emits = defineEmits(['getSelectList']);

const props = defineProps({
  // 父组件修改时传过来的数据
  inputValue: {
    type: Array,
    required: false,
  },
  // 单选时从父组件传值设置为单选 1 为单选 2为多选（默认）
  isshow: {
    type: Number,
    required: false,
  },
});

const defaultProps = reactive({
  children: "children",
  label: "label",
});
// // 选中的人员
const loading = ref(false); // 加载
const loading1 = ref(false); // 加载
const total = ref(0);
let state = reactive({
  deptOptions: [], // 部门树选项
  userList: [], // 用户表格数据
  selectList: [], // 最终选中传给父组件的人员
});
const queryParams = reactive({
  orgId: "",
  userName: "",
  pageSize: 10,
  currentPage: 1,
});
const checked = ref();
const radio = ref();
const { deptOptions, userList, selectList } = toRefs(state);
const { inputValue, isshow } = toRefs(props);

// 单选表格
function handleCurrentChange(val) {
  selectList.value = [val];
}
// 部门  树形数据
// 处理数据
function disposeata(data) {
  data.forEach((item) => {
    item.label = item.name;
    item.children && disposeata(item.children);
    delete item.open
  });
  return data
}
function getTreeselect() {
  loading.value = true;
  treeSelectDepts().then((response) => {
    loading.value = false;
    nextTick(() => {
      deptOptions.value = disposeata([response.data]);
    });
  });
}

// 筛选节点
function filterNode(value, data) {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
}

// 树形节点单击事件
function handleNodeClick(data) {
  queryParams.orgId = data.id;
  getList();
}


/** 查询用户列表 */
function getList() {
  loading1.value = true;
  queryUserList(queryParams).then((response) => {
    loading1.value = false;
    nextTick(() => {
      userList.value = response.data.results;
      total.value = response.data.totalRows;
    });
    checked.value.clearSelection(); //清除回显
    //  多选表格样式回显
    userList.value.forEach((i) => {
      selectList.value.forEach((item) => {
        if (i.uuid == item.uuid) {
          isshow.value != 1
            ? checked.value.toggleRowSelection(item) //多选
            : radio.value.setCurrentRow(item, true); // 单选高亮某一行
        }
      });
    });
  });
}

// 表格===>> 取消选择
function toggleSelection(rows) {
  selectList.value = [];
  checked.value.clearSelection();
  if (isshow.value == 1) {
    radio.value.setCurrentRow();
    selectList.value.splice(selectList.value.indexOf(rows), 1);
  }
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.currentPage = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  queryParams.userName = "";
  handleQuery();
}

// 已选人员===>>> 删除
function handleClose(tag) {
  // 多选
  if (isshow.value != 1) {
    selectList.value.splice(selectList.value.indexOf(tag), 1);
    checked.value.toggleRowSelection(tag, false);
  }
  // 单选
  if (isshow.value == 1) {
    radio.value.setCurrentRow();
    selectList.value.splice(selectList.value.indexOf(tag), 1);
  }
  if (inputValue.value) {
    checked.value.toggleRowSelection(tag, false); //多选
    getList();
  }
}
// 判断复选框状态
function selectionRow(selection, row) {
  let selected = selection.length && selection.indexOf(row) !== -1; //为true时选中，为 0（或者false）时未选中
  if (selected) {
    selectList.value.unshift(row);
  } else {
    for (let i = 0; i < selectList.value.length; i++) {
      if (row.uuid == selectList.value[i].uuid) {
        selectList.value.splice(i, 1);
      }
    }
  }
}
//表格全选事件
function selectionRowAll(selection) {
  if (selection.length) {
    let list = selection;
    for (let i = 0; i < list.length; i++) {
      for (let j = 0; j < selectList.value.length; j++) {
        if (list[i].uuid == selectList.value[j].uuid) {
          selectList.value.splice(j, 1);
        }
      }
    }
    list.forEach((item) => {
      selectList.value.unshift(item);
    });
  } else {
    userList.value.forEach((item) => {
      selectList.value.splice(selectList.value.indexOf(item), 1);
    });
  }
}

function submit() {
  emits("getSelectList", selectList.value);
  reset();
}

function reset() {
  userList.value = [];
  selectList.value = [];
  queryParams.userName = "";
}

defineExpose({
  reset,
  submit,
  getTreeselect,
});
</script>

<style scoped>
.app-containers ::-webkit-scrollbar {
  display: none;
  height: 605px;
}

.one,
.three,
.two {
  height: 595px;
  width: 100%;
  border: solid 1px #dadada;
  overflow: hidden;
}

.one {
  width: 95%;
}

.two {
  border: 1px solid transparent;
}

.three {
  margin-left: 14px;
  width: 99%;
  box-sizing: border-box;
  overflow: auto;
}

.el-main,
.smallmain {
  overflow: auto;
  padding: 0;
}

.smallHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1890ff;
  position: relative;
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  height: calc(100% - 40px);
}

.open,
.smallmain :deep(.el-tree-node:focus)>.el-tree-node__content {
  background-color: #83bff8 !important;
}

.smallmain :deep(.el-tree-node__content:hover) {
  background-color: #dadada;
}

.smallmain :deep(.el-tree--highlight-current) .el-tree-node.is-current>.el-tree-node__content {
  background-color: #83bff8;
}

.tableBox :deep(.el-table) {
  margin: 0;
}

.radio {
  position: relative;
}

.nodata {
  width: 100%;
  text-align: center;
  line-height: 40px;
  height: 40px;
}

.tagBox {
  width: 100%;
}

.tag {
  width: 100%;
  height: 38px;
}

.tagItem {
  display: inline-block;
  width: calc(100% / 3.2);
  text-align: center;
  /* 单行文本溢出省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrapBox :deep(.el-table__body tr.current-row)>td {
  background-color: #83bff8 !important;
}

.wrapBox :deep(.el-table) tbody tr:hover>td {
  background-color: #dadada;
}

:deep(.el-tag) {
  margin-left: 0px;
}

:deep(.is-last) {
  position: absolute;
  top: -9999px;
  /* display: none; */
}

:deep(.el-pagination__sizes) {
  position: absolute;
  top: -9999px;
  /* display: none; */
}
</style>

